﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<style>
	.btn.active {
		background: #24f;
		color: #fff;
	}
</style>
<title>管理员列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container" id="app">
	<div class="row cl">
		<div class="btn-group">
			<button @click="tab = 1" :class="{'active': tab == 1}" class="btn">管理员列表</button>
			<button @click="tab = 2" :class="{'active': tab == 2}" class="btn">申请列表</button>
		</div>
	</div>

	<div class="content mt-20">
		<div class="cl" v-show="tab == 1">
			<admin-list-component></admin-list-component>
		</div>
		<div class="cl" v-show="tab == 2">
			<apply-list-component></apply-list-component>
		</div>
	</div>
</div>

<template id="adminList">
	<table class="table table-border table-bordered table-bg">
		<thead>
			<tr>
				<th scope="col" colspan="5">管理员列表</th>
			</tr>
			<tr class="text-c">

				<th width="150">用户名</th>
				<th width="150">邮箱</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" v-for="(item, index) in list">

				<td>{{item.name}}</td>
				<td>{{item.email}}</td>
				<td class="td-manage">
					 <a title="删除" href="javascript:;" @click="cancelAdmin(index)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
				</td>
			</tr>
			
		</tbody>
	</table>
</template>

<template id="applyList">
	<table class="table table-border table-bordered table-bg">
		<thead>
			<tr>
				<th scope="col" colspan="5">申请列表</th>
			</tr>
			<tr class="text-c">

				<th width="150">用户名</th>
				<th width="150">申请理由</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr class="text-c" v-for="(item, index) in list">

				<td>{{item.handler.name}}</td>
				<td>{{item.content}}</td>
				<td class="td-manage">
					<div  v-show="item.status == 0">
						 <button class="btn" @click="handlerApply(index, 1)">通过</button>
					 	<button class="btn" @click="handlerApply(index, 0)">不通过</button>
					</div>
					<div v-show="item.status == 1">
						{{item.access == 1 ? '通过': '未通过'}}
					</div>
					
				</td>
			</tr>
			
		</tbody>
	</table>
</template>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->


<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script src="lib/vue/vue.min.js"></script>
<script src="lib/vue/vue-resource.min.js"></script>
<script src="assets/vue-filter.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script src="assets/util.js"></script>
<script type="text/javascript">

Vue.use(VueResource)

var applyListComponent = Vue.extend({
	template: '#applyList',
	data: function () {
		return {
			list: [],
			page: 1,
			limit: 10
		}
	},
	mounted: function () {
		this.getList(0)
	},
	methods: {
		getList: function (skip) {
			this.$http.get('/m/apply/skip/' + (this.page + skip - 1) * this.limit + '/limit/' + this.limit).then(function (res) {
				if (res.data.code == 100) {
					this.list = res.data.data.list
				} else if (res.data.code == 112) {
					alert('已经最后一页了')
				} else {
					alert(res.data.msg)
				}
			})
		},
		handlerApply: function (index, access) {
			var apply = this.list[index]
			this.$http.put('/m/apply/id/' + apply._id, {access: access}).then(function (res) {
				if (res.data.code == 100) {
					apply.status = 1
					apply.access = access
					alert('操作成功')
				} else {
					alert(res.data.msg)
				}
			})
		}
	}
})


var adminListComponent = Vue.extend({
	template: '#adminList',
	data: function () {
		return {
			list: []
		}
	},
	mounted: function () {
		this.getList(0)
	},
	methods: {
		getList: function (skip) {
			this.$http.get('/m/adminList').then(function (res) {
				if (res.data.code == 100) {
					this.list = res.data.data.list
				}else {
					alert(res.data.msg)
				}
			})
		},
		cancelAdmin: function (index) {
			var admin = this.list[index]
			this.$http.put('/user/baseInfo/id/' + admin._id, {identity: 0}).then(function (res) {
				if (res.data.code == 100) {
					alert('取消管理成功')
					this.list.splice(index, 1)
				} else {
					alert(res.data.msg)
				}
			})
		}
	}
})


new Vue({
	el: '#app',
	data: {
		tab: 1
	},
	components: {
		'admin-list-component': adminListComponent,
		'apply-list-component': applyListComponent
	}
})
</script>
</body>
</html>